<!--
 * @Description: 日期类型可选择组件
 * @Author: chenshanqiang
 * @Date: 2023-04-10
 * @LastEditTime: 2023-05-12
 * @LastEditors: 2023-05-18
-->
<template>
  <div class="flex-row">
    <el-select
      :popper-append-to-body="popperAppendToBody"
      class="select-style"
      popper-class="custom-select"
      v-model="tempType"
      :placeholder="placeholder"
      @change="changeDateType"
    >
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item"
        :value="translationData(item)"
      >
      </el-option>
    </el-select>
    <el-date-picker
      ref="dateComp"
      v-model="dateValue"
      :type="tempType"
      :format="valueFormat"
      value-format="yyyy-MM-dd"
      :placeholder="placeholder"
      @change="changeDate"
      class="custom-date"
      :clearable="false"
      :editable="false"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'SelectDate',
  props: {
    // 日期类型
    options: {
      type: Array,
      default() {
        return ['日', '月', '年']
      }
    },
    // 默认值
    defaultValue: {
      type: String,
      default: ''
    },
    // 日期当前类型
    type: {
      type: String,
      default: 'year'
    },
    // 当前时间日期选择器特有的选
    pickerOptions: {
      type: Object,
      default() {
        return {}
      }
    },
    // 输入框占位文本
    placeholder: {
      type: String,
      default: '选择'
    },
    // 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false
    popperAppendToBody: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      valueFormat: '',
      optionsAll: [
        { label: '日', value: 'date' },
        { label: '月', value: 'month' },
        { label: '年', value: 'year' }
      ],
      formatData: {
        date: 'yyyy-MM-dd',
        month: 'yyyy-MM',
        year: 'yyyy'
      },
      currentDate: {},
      dateValue: this.defaultValue,
      tempDateValue: this.defaultValue,
      tempType: this.type
    }
  },
  created() {
    this.valueFormat = this.formatData[this.tempType]
  },
  methods: {
    /**
     * @description  选择日期类型
     * @param {String} val 日期类型值
     * @return void
     */
    changeDateType(val) {
      this.storDate(val)
      this.valueFormat = this.formatData[val]
    },
    /**
     * @description  选择日期
     * @param {String} val 日期值
     * @return void
     */
    changeDate(val) {
      let dateTypeValue = {
        year: val.slice(0, 4) + this.tempDateValue.slice(4, 10),
        month: val.slice(0, 7) + this.tempDateValue.slice(7, 10),
        date: val
      }
      // 当日期类型为日时，日期暂存
      this.tempDateValue = this.dateValue = dateTypeValue[this.tempType]
      this.storDate(this.tempType)
    },
    /**
     * @description  翻译日期类型
     * @param {String} val 日期类型（label）
     * @return {String} 日期类型（value）
     */
    translationData(val) {
      return this.optionsAll[
        this.optionsAll.findIndex(item => item.label === val)
      ].value
    },
    /**
     * @description  返回当前日期信息
     * @param {String} type 日期类型
     * @return void
     */
    storDate(type) {
      this.currentDate = {
        year: this.dateValue.slice(0, 4),
        month: this.dateValue.slice(0, 7),
        date: this.dateValue.slice(0)
      }
      this.$emit('Change', { type: type, date: this.currentDate[type] })
    },
    // 日期重置
    reset() {
      this.dateValue = this.defaultValue
      this.tempType = this.type
      this.valueFormat = this.formatData[this.tempType]
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .select-style {
  width: 60px;
  .el-input__inner {
    border-radius: 0px;
    background: rgb(250, 250, 250);
    padding-right: 0px;
    &:focus {
      border-color: rgba(222, 224, 230, 1) !important;
    }
  }
  .el-input.is-focus .el-input__inner {
    border-color: rgba(222, 224, 230, 1) !important;
  }
  // .el-input__icon {
  //   width: 13px;
  // }
}
::v-deep .custom-select {
  width: 40px;
  .el-select-dropdown__item {
    padding: 0;
    text-align: center;
  }
}
::v-deep .custom-date {
  .el-input__inner {
    border-radius: 0px;
  }
}
</style>
